<template>
  <div>
    <h1>vue兼容到ie8</h1>
    <h1>MVVM</h1>
    <ul>
      <li>view:视图</li>
      <li>viewModel:</li>
      <li>model:数据模型</li>
    </ul>
    <p>数据驱动视图</p>
    <p>vue是渐进式JavaScript框架，只关心视图层</p>
    <p>数据双向绑定 组件化开发 虚拟DOM</p>
    <h1>MVC model-view-controller</h1>
    <p>单向通信 VM并没有完全取代C，在MVC的基础上增加一层VM，只是弱化了C的概念</p>
    <p>SPA single page Application 单页面应用</p>
    <!-- 将于明洋的信息渲染到页面 -->
    <!-- 双大括号表达式 又叫 Mustache -->
    <p>{{msg}}</p>
    <!-- 指令   v-text 无论内容是什么 都会当做字符串来解析 v-html 当做代码去解析-->
    <p v-text="info"></p>
    <p v-html="info"></p>
    <!-- 收集表单数据 数据双向的效果  -->
    <input type="text" v-model="msg" />
    <!-- 数据双向绑定   Object.defineProperty    -->
    <p v-once>{{msg}}</p>
    <!-- v-once 实现一次性插入，当data中的数据发生改变，它就不会再发生改变 -->
    <p v-bind:title="texts">张炜基</p>
    <p :title="texts">张炜基</p>
    <!-- v-bind将标签的属性变成动态 简写为： -->
    <!--在指令和双括号表达式中 能填变量 也能填写表达式  -->
    <!-- 能在vue中操作的值，必须有初始值 初始值都应该声明在data中 
        str:''
        num:0
        flag:true/false
        obj:{}
        arr:[]
    -->
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      msg: "于明洋困了！！",
      info: "<h1>于明洋困了！！</h1>",
      texts: "你是个大帅锅"
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {},

  watch: {}
};
</script>
<style lang='' scoped>
</style>